import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Dimensions,
    Text,
    View,
    TouchableOpacity,
    ImageBackground,
    Image,
    Platform,
    TextInput
} from 'react-native';
import AndroidModule from '../../../../utils/AndroidConnent'

export default class PublishCarRadio extends Component {

    constructor(props) {
        super(props);
        this.state = {

        }
    };

    componentDidMount() {

    }


    render() {
        return (
            <View style={styles.itemBox}>
                <View style={styles.itemLeftBox}>
                    <Text style={styles.itemTitleText}>
                        {this.props.name}
                        {
                            this.props.necessary ?
                                <Text style={{ color: '#FB3D3C' }}>*</Text>
                                :
                                null
                        }
                    </Text>
                </View>
                <View style={styles.itemRightBox}>
                    {
                        this.props.radioItems.map((item, index) => {
                            return (
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    style={{ flexDirection: 'row', alignItems: 'center', marginLeft: index == 0 ? 0: 50 }}
                                    onPress={() => {
                                        if (this.props.clickHandle) {
                                            this.props.clickHandle(item.value)
                                        }
                                    }}
                                >
                                    <View style={styles.bigDot}>
                                        {
                                            this.props.radioValue == item.value ?
                                                <View style={styles.smallDot}></View>
                                                :
                                                null
                                        }
                                    </View>
                                    <Text style={styles.typeText}>{item.title}</Text>
                                </TouchableOpacity>
                            )
                        })
                    }
                </View>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    itemBox: {
        width: '100%',
        height: 45,
        borderBottomColor: '#e4e4e4',
        borderBottomWidth: 0.3,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    itemLeftBox: {
        width: 92,
    },
    itemRightBox: {
        flex: 1,
        marginLeft: 4,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    itemTitleText: {
        fontSize: 14,
        color: '#222222'
    },

    bigDot: {
        width: 18,
        height: 18,
        borderRadius: 9,
        borderColor: '#999999',
        borderWidth: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    smallDot: {
        width: 10,
        height: 10,
        borderRadius: 5,
        backgroundColor: '#FFE001',
    },
    typeText: {
        color: '#222222',
        fontSize: 14,
        marginLeft: 8
    },

})